<script setup>
import { ref ,onMounted} from 'vue'
import * as THREE from 'three';
defineProps({
  msg: String,
})
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 45
, window.innerWidth / window.innerHeight, //宽高比
0.1, //近平面
1000 );//远平面
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

const cube = new THREE.Mesh(geometry,material)
scene.add(cube)
camera.position.z = 5
camera.lookAt(0,0,0)
const animate = ()=>{
  requestAnimationFrame(animate)
  cube.rotation.x+=0.01
  cube.rotation.y+=0.01
  renderer.render(scene,camera)

}
onMounted(() => {
  animate()
})
</script>

<template>
  <div>
    😊
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
